<template>
  <div class="container"></div>
</template>

<script setup>
import { reactive, onMounted, onBeforeUnmount } from 'vue'
import { useRoute } from 'vue-router'

// 数据管理
const route = useRoute()
document.title = route.query.title

const img_width = 220
let container, timer

onMounted(() => {
  createImgs()
  createImgs()
  createImgs()
  window.addEventListener('resize', onWindowResize)
  // 当window的resize时重新设置位置(节流500ms执行一次)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', onWindowResize)
})

/********* 方法 **********/
// 窗口发生改变
const onWindowResize = () => {
  if (timer) {
    clearTimeout(timer)
  }
  timer = setTimeout(setPositions, 100)
}
// 创建图片
const createImgs = () => {
  container = document.querySelector('.container')
  for (let i = 1; i <= 15; i++) {
    let src = `src/assets/images/2/${i}.jpg`
    const img = document.createElement('img')
    img.src = src
    img.width = img_width
    // 每一张图片加载完成就设置位置
    img.onload = setPositions
    container.appendChild(img)
  }
}

// 计算一共有多少列，一级每一列之间的间隙
const cal = () => {
  // 容器宽度
  const container_width = container.clientWidth
  // 计算列的数量
  const columns = Math.floor(container_width / img_width)
  // 计算间隙
  const space_number = columns - 1 // 间隙的数量
  const left_space = container_width - columns * img_width // 计算剩余的空间
  const space = left_space / space_number // 每个间隙的空间大小
  return {
    space,
    columns,
  }
}

// 设置每张图片的位置
const setPositions = () => {
  // 获取列数和间隙
  const { space, columns } = cal()
  // 该数组的长度为列数，每一项表示该列的下一个图片的纵坐标
  const next_tops = new Array(columns)
  console.log(next_tops, 74)
  // 将数组的每一项填充为0
  next_tops.fill(0)
  for (let i = 0; i < container.children.length; i++) {
    const img = container.children[i]
    // 找到next_tops中的最小值作为当前图片的纵坐标
    const min_top = Math.min.apply(null, next_tops)
    img.style.top = min_top + 'px'
    // 重新设置数组这一项的下一个top值
    const index = next_tops.indexOf(min_top) // 得到使用的是第几列的top值
    next_tops[index] += img.height + space
    // 计算横坐标
    const left = (index + 1) * space + index * img_width
    img.style.left = left + 'px'
    img.style.position = 'absolute'
    img.style.transition = '0.3s'
  }
  // 得到next_tops中的最大值
  const max = Math.max.apply(null, next_tops)
  // 设置容器的高度
  container.style.height = max + 'px'
}
</script>

<style lang="scss" scoped>
.container {
  width: 90%;
  margin: 0 auto;
  position: relative;

  // 不知道为啥这里设置的img css不生效，改在JS中设置
  img {
    position: absolute;
    transition: 0.3s;
  }
}
</style>
